<template>
  <view class="index">
    <view class="article-swiper">
      <swiper class="index-swiper" autoplay circular @change="changeSwiper" :interval="3000" indicator-dots="true">
        <swiper-item v-for="item in articles" :key="item.url" @click="toArticle(item.url)">
          <view class="swiper-content">
            <image class="swipwer-img" :src="item.img" alt="" mode="scaleToFill" />
            <view class="swiper-title">{{ item.title }}</view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <view class="kind-tabbar">
      <view class="kind-box">
        <view class="kind" :class="{ 'kind-active': currentKind == 1 }" @click="changeKind(1)">前端</view>
      </view>
      <view class="kind-box">
        <view class="kind" :class="{ 'kind-active': currentKind == 2 }" @click="changeKind(2)">后端</view>
      </view>
      <view class="kind-box">
        <view class="kind" :class="{ 'kind-active': currentKind == 3 }" @click="changeKind(3)">辅助</view>
      </view>
    </view>

    <Card :info=helpers></Card>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, Ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Card from "../../components/Card/card.vue";

// Request
interface Person {
  imgurl: string;
  kind: string;
  msg: { key: string, value: string }[];
}
const helpers: Ref<Person[]> = ref([]);
const allHelpers: Ref<Person[]> = ref([]);

onLoad(() => {
  uni.request({
    url: "http://lvris.com:3000/human",
    method: "GET",
    success(res) {
      console.log("开发数据", res);
      allHelpers.value = res.data.map((item: any) => {
        return{
          imgurl: item.pic || "../../static/logo.png",
          kind: item.kind || "辅助",
          content: item.content || "",
          msg: [{
            key: "名称",
            value: item.name + " " + (item.code || "")
          },{
            key: "介绍",
            value: item.content || "",
          }]
        }
      })
      changeKind(1);
    }
  })
})
// Kind
const currentKind = ref(1);
function changeKind(val: number) {
  let chooseKind = "";
  switch (val) {
    case 1:
      chooseKind = "前端"
      break;
    case 2:
      chooseKind = "后端"
      break;
    case 3:
      chooseKind = "辅助"
      break;
    default:
      break;
  }
  currentKind.value = val;
  helpers.value = allHelpers.value.filter((item) => {
    return item.kind == chooseKind
  })
}

// Swiper
const articles = reactive([
  {
    title: "压制小指南",
    img: "https://lvris.com/p/compress-guide/c5880d936d7da387a3f12a72c1af7ec6_hu6c48b2cce6b64e24b6df37c5036cc0fd_166510_1600x0_resize_q75_box.jpg",
    url: "https://lvris.com/p/compress-guide.html",
  },
  {
    title: "视频工具箱",
    img: "https://lvris.com/p/video-toolkit/title_hu6e5cae1c58a2811e3af0db8f1c2e5879_72096_1600x0_resize_q75_box.jpg",
    url: "https://lvris.com/p/video-toolkit.html",
  }
]);
const currentSwiper = ref(0);
function changeSwiper(e: any) {
  currentSwiper.value = e.detail.current;
}

function toArticle(url:string) {
  console.log(url);
  uni.navigateTo({
    url: "/pages/common/article?url=" + encodeURIComponent(url),
  });
}
</script>

<style lang="scss" scoped>
.index {
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  padding: 30rpx;
  background-color: #f1f2f2;

  .article-swiper {
    height: 270rpx;
    width: 100%;
    overflow: hidden;
    border-radius: 30rpx;


    .index-swiper {
      height: 270rpx;
      width: 100%;

      .swiper-content {
        position: relative;
        height: 270rpx;
        width: 100%;

        image {
          height: 270rpx;
          width: 100%;
          //clip:rect(0rpx ,270px , 0 , 100%);
        }

        .swiper-title {
          position: absolute;
          bottom: 10rpx;
          left: 20rpx;
          color: #ffffff;
          font-size: 30rpx;
        }
      }
    }
  }

  .kind-tabbar {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 80rpx;
    width: 100%;

    background-color: #ffffff;
    margin-top: 30rpx;

    .kind-box {
      width: 33%;

      .kind {
        box-sizing: border-box;
        height: 60rpx;
        width: fit-content;
        margin: 0 auto;
        line-height: 60rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: 500;
      }

      .kind-active {
        color: #4d91bb;
        border-bottom: 5rpx solid #4d91bb;
      }
    }
  }
}
</style>
